<template>
  <div>
    <h2>动态组件</h2>
    <keep-alive>
      <component :is="componentView"></component>
    </keep-alive>
    <button @click="changeComponent">点我切换组件</button>
  </div>
</template>

<script>
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
import ComponentC from "./ComponentC";

export default {
  data() {
    return {
      counter: 0,
      componentView: "component-a"
    };
  },
  components: {
    "component-a": ComponentA,
    "component-b": ComponentB,
    "component-c": ComponentC
  },
  methods: {
    changeComponent() {
      this.counter++;
      console.log(`this.counter ==== ` + this.counter);
      if (this.counter % 3 == 0) {
        this.componentView = "component-a";
      } else if (this.counter % 3 == 1) {
        this.componentView = "component-b";
      } else if (this.counter % 3 == 2) {
        this.componentView = "component-c";
      }
    }
  }
};
</script>

<style>
</style>
